<template>
  <el-container>
    <el-header style="line-height: 30px; height: 30px;">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="username">
          <el-input v-model="queryData.username" placeholder="用户名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSysUser">新增系统用户</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
        <el-table-column label="ID" prop="id" header-align="center" align="center" width="80" />
        <el-table-column label="用户" prop="username" header-align="center" align="center" min-width="140" />
        <el-table-column label="状态" prop="status" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.status ? 'success' : 'primary'">{{ statusMap[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="roleNames" header-align="center" align="center" min-width="260" />
        <el-table-column label="创建人" prop="createUser" header-align="center" align="center" min-width="100" />
        <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" min-width="140" />
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click="updateSysUser(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="!scope.row.status"
              type="text"
              size="mini"
              icon="el-icon-check"
              @click="statusChange(scope.row)"
            >启用</el-button>
            <el-button
              v-if="scope.row.status"
              type="text"
              size="mini"
              icon="el-icon-close"
              @click="statusChange(scope.row)"
            >禁用</el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-switch-button"
              @click="restPassword(scope.row)"
            >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>

    <!-- 新增系统用户 -->
    <el-dialog
      v-loading="sysUser.loading"
      :title="sysUser.title"
      :visible.sync="sysUser.show"
      top="15vh"
      width="420px"
      :before-close="handleClose"
    >
      <el-form
        ref="sysUserForm"
        :model="sysUser.form"
        :rules="rules"
        size="small"
        label-width="80px"
        style="width: 350px;"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="sysUser.form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="sysUser.form.roleIds" multiple placeholder="请选择" style="width: 270px;">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="sysUser.form.id > 0" label="状态" prop="status">
          <el-switch
            v-model="sysUser.form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
        <el-form-item>
          <span style="font-size: 12px; color: #42b983;">注：初始密码 666666</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="sysUser.show = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitSysUser">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
import { sysAjax } from 'Ajax'
export default {
  name: 'SysUser',
  data() {
    return {
      loading: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      statusMap: { false: '禁用', true: '启用' },
      rules: {
        username: [{ required: true, message: '用户名称不能为空' }],
        roleIds: [{ required: true, message: '角色不能为空' }]
      },
      sysUser: {
        title: '新增采购员',
        show: false,
        loading: false,
        form: {}
      },
      roleList: []
    }
  },
  created() {
    this.queryPageList()
    sysAjax.getRoleSelectList().then(data => {
      this.roleList = data
    })
  },
  methods: {
    reset(formName) {
      this.$refs[formName].resetFields()
      this.queryPageList()
    },
    queryPageList() {
      this.loading = true
      sysAjax.sysUserList(this.queryData).then(response => {
        this.pageTableData = response.list
        this.queryData.pageNum = response.currPage
        this.queryData.pageSize = response.pageSize
        this.queryData.totalCount = response.totalCount
        this.loading = false
      })
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo
      this.queryData.pageSize = pageSize
      this.queryPageList()
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    addSysUser() {
      this.sysUser.show = true
      this.sysUser = {
        title: '新增用户',
        show: true,
        loading: false,
        form: {
          status: true
        }
      }
    },
    updateSysUser(row) {
      this.sysUser = {
        title: '修改用户【' + row.username + '】信息',
        show: true,
        loading: false,
        form: row
      }
      const roleIdArray = []
      row.roleIds.split(',').forEach(e => {
        roleIdArray.push(Number(e))
      })
      this.$set(this.sysUser.form, 'roleIds', roleIdArray)
      console.log('form', this.sysUser.form)
      this.sysUser.show = true
    },
    submitSysUser() {
      this.$refs.sysUserForm.validate((valid) => {
        if (valid) {
          // console.log('form', this.sysUser.form);
          // return
          this.sysUser.loading = true
          if (this.sysUser.form.id === undefined) {
            const params = {
              'username': this.sysUser.form.username,
              'roleIds': this.sysUser.form.roleIds
            }
            sysAjax.sysUserAdd(params).then(() => {
              this.msgSuccess('添加用户成功')
              // 设置延迟执行
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增用户',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          } else {
            sysAjax.sysUserUpdate(this.sysUser.form).then(() => {
              this.msgSuccess('修改成功')
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增用户',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          }
        }
      })
    },
    statusChange(row) {
      const action = row.status ? '禁用' : '启用'
      this.$confirm('是否确认' + action + '账号【' + row.username + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysAjax.sysUserStatusChange({ 'id': row.id }).then(() => {
          this.msgSuccess(action + '成功')
          this.queryPageList()
        })
      }).catch(() => {})
    },
    restPassword(row) {
      const content = '是否确认重置用户【' + row.username + '】的密码为【666666】'
      this.$confirm(content, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sysAjax.initPassword({ id: row.id }).then(res => {
            this.msgSuccess('操作成功!')
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
</style>
